/** @jsxImportSource @emotion/react */
import * as React from "react";
import {Text, BlobInputList, InputLine,} from "customize-easy-ui-component";
import {InspectRecordLayout, InternalItemProps, useInputControlSure, } from "../../common/base";
import {useMeasureInpFilter} from "../../common/hooks";
import {EditStorageContext} from "../../StorageContext";
import {useUppyUpload} from "../../hook/useUppyUpload";

//锅炉简图
export const itemA简图=['简图说明','_FILE_S简图',];
export const BoilerDiagram =
    React.forwardRef((
        {children, show, alone = true, refWidth, label,repId}: InternalItemProps, ref
    ) => {
        const {modified,setModified,} =React.useContext(EditStorageContext) as any;
        const [getInpFilter] = useMeasureInpFilter(null, itemA简图, );
        const {inp, setInp,onSure} = useInputControlSure({ ref, });
        const onFinish = React.useCallback(async(upfile: any, del:boolean) => {
            onSure({...inp, '_FILE_S简图': upfile});
            !modified && setModified(true);
        }, [inp, modified,onSure,setModified]);
        const [uploadDom]=useUppyUpload({ repId:repId!,
            maxFile:5, onFinish, storeObj: inp?._FILE_S简图
        });
        return (
            <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show}
                                 alone={alone} label={label!}>
                <Text variant="h5">{label}：</Text>
                <InputLine label='锅炉简图说明：'>
                    <BlobInputList value={inp?.简图说明 || ''} rows={2} datalist={[ ]}
                                   onListChange={v => setInp({...inp, 简图说明: v || undefined}) } />
                </InputLine>
                锅炉简图：
                {uploadDom}
                {children}
            </InspectRecordLayout>
        );
    });
